import React from 'react';
import { Card } from 'antd-mobile';
import { HeartOutline, GiftOutline } from 'antd-mobile-icons';
import './KnowledgeSection.scss';

interface KnowledgeCard {
  id: number;
  title: string;
  subtitle: string;
  icon: React.ReactNode;
  bgColor: string;
  onClick?: () => void;
}

const KnowledgeSection: React.FC = () => {
  const knowledgeCards: KnowledgeCard[] = [
    {
      id: 1,
      title: '常见病症',
      subtitle: '了解常见疾病症状',
      icon: <HeartOutline className="card-icon" />,
      bgColor: 'linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%)',
      onClick: () => console.log('常见病症')
    },
    {
      id: 2,
      title: '常用药品',
      subtitle: '药品使用指南',
      icon: <GiftOutline className="card-icon" />,
      bgColor: 'linear-gradient(135deg, #fff7e6 0%, #fff2d9 100%)',
      onClick: () => console.log('常用药品')
    }
  ];

  return (
    <div className="knowledge-section">
      <h2 className="section-title">知识宝典</h2>
      <div className="knowledge-cards">
        {knowledgeCards.map((card) => (
          <Card
            key={card.id}
            className="knowledge-card"
            onClick={card.onClick}
          >
            <div 
              className="card-content"
              style={{ background: card.bgColor }}
            >
              <div className="card-icon-wrapper">
                {card.icon}
              </div>
              <div className="card-text">
                <h3 className="card-title">{card.title}</h3>
                <p className="card-subtitle">{card.subtitle}</p>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default KnowledgeSection;
